import React, {Component} from 'react'
import {
  StyleSheet
} from 'react-native'
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view'
import FeaturedScreen from './Featured'
import WatchedScreen from './Watched'

export default class Home extends Component
{
  componentDidMount() {
    this.props.navigator.setStyle({
      navBarCustomView: 'letsGo.components.HomeHeader',
      navBarCustomViewInitialProps: {
        onRightButtonPress: () => {
          this.props.navigator.showModal({
            screen: 'letsGo.modal.PublishModal', // unique ID registered with Navigation.registerScreen
            title: '开始创建', // title of the screen as appears in the nav bar (optional)
            passProps: {}, // simple serializable object that will pass as props to the modal (optional)
            navigatorStyle: {
              navBarHidden: true
            }, // override the navigator style for the screen, see "Styling the navigator" below (optional)
            animationType: 'none' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up')
          })
        }
      }
    })
  }

  render() {
    return (
      <ScrollableTabView
        initialPage={0}
        renderTabBar={ () => <DefaultTabBar style={ styles.container } tabStyle={ styles.tab }/> }
        tabBarUnderlineStyle={ styles.tabUnderline }
        tabBarActiveTextColor='#0099FF'
        tabBarInactiveTextColor='#999999'
        tabBarTextStyle={{fontSize: 12}}>
        <FeaturedScreen tabLabel="精选" />
        <WatchedScreen tabLabel="关注" />
      </ScrollableTabView>
    )
  }
}

const styles = StyleSheet.create( {
  container: {
    height: 35,
    borderWidth: 0
  },
  tab: {
    height: 35,
    paddingBottom: 2
  },
  tabUnderline: {
    height: 2,
    backgroundColor: '#0099FF'
  }
} )